<template>
  <div class="footer-box">
    <div class="footer-content">
      <div class="floor-right">
        <div class="swhz-">
          <div class="top-font">商务合作</div>
          <div class="font-base" style="padding-top: 100px;font-family: BebasFontEn">
            light_brand@163.com <br />
            4000-662-169
          </div>
          <div class="font-base" style="padding-top: 35px">
            +86 18810111677 <br />
            +86 15168883633
          </div>
        </div>
        <div class="find-us">
          <div class="top-font">找到我们</div>
          <div class="font-base dot-style" style="margin-top: 100px">
            上海 / 闵行区新龙路1333弄万科国际28幢511-516
          </div>
          <div class="font-base dot-style" style="margin-top: 36px">
            济南 / 高新区颖秀路2600号山东大学科技产业园内
          </div>
          <div class="font-base dot-style" style="margin-top: 36px">
            北京  /  朝阳区百字湾路今日美术馆东侧
          </div>
        </div>

        <div class="swhz-part">
          <div class="guanzhuus">
            <div class="top-font">关注我们</div>
            <div class="icon-list">
              <iconChange :size="'89'" @click="goToExternalSite('xhs')" :baseImg="xhs" :activeImg="xhsactive" />
              <iconChange :size="'89'" @click="goToExternalSite('zcool')" :baseImg="zcool" :activeImg="zcoolactive" />
              <iconChange :size="'89'" @click="goToExternalSite('gtn')" :baseImg="gtn" :activeImg="gtnacrive" />
              <iconChange :size="'89'" @click="goToExternalSite('be')" :baseImg="be" :activeImg="beactive" />
            </div>
          </div>
          <div class="line-center"></div>
          <div class="img-list">
            <div class="qrcode">
              <div>
                <el-image class="imgstyle" :src="lightercode" fit="cover" />
              </div>
              <div class="qrfont">
                微信公众号
              </div>
            </div>
            <div class="qrcode" style="padding-top:10px">
              <div>
                <el-image class="imgstyle" :src="ceoercode" fit="cover" />
              </div>
              <div class="qrfont">
                创始人微信
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="bottom-txt">
      <div class="font-bottom-top" style="padding-top: 80px">
        京ICP备18030404号-1
      </div>
      <div class="about-web" style="padding-top: 5px">
        ® 2021-2025 LIGHT BRANDING. Rights Reserved by LIGHT BRANDING.
      </div>
    </div>

  </div>
</template>

<script>
import scrollHandle from "@/components/scrollHandle.vue";
import lightercode from "@/assets/imgs/lightercode.png";
import ceoercode from "@/assets/imgs/ceoercode.png";

import xhs from "@/assets/imgs/xhsb.png";
import xhsactive from "@/assets/imgs/xhsactiveb.png";
import zcool from "@/assets/imgs/zcoolb.png";
import zcoolactive from "@/assets/imgs/zcoolactiveb.png";
import gtn from "@/assets/imgs/gtnb.png";
import gtnacrive from "@/assets/imgs/gtnacriveb.png";
import be from "@/assets/imgs/beb.png";
import beactive from "@/assets/imgs/beactiveb.png";

import iconChange from "@/components/iconChange.vue";
export default {
  name: "LightWebListBody",
  components: {
    iconChange,
    scrollHandle,
  },
  data() {
    return {
      lightercode: lightercode,
      ceoercode: ceoercode,
      xhs: xhs,
      xhsactive: xhsactive,
      zcool,
      zcoolactive,
      gtn,
      gtnacrive,
      be,
      beactive,
    };
  },

  mounted() { },

  methods: {
    goToExternalSite(val) {
      let _url = ''
      switch (val) {
        case 'xhs':
        _url = 'https://www.xiaohongshu.com/user/profile/5c3a0c0300000000050318f8?xsec_token=ABegkCwP6AvD0hi1qeMZurmw2G03jwdcSRAUMYzuAm9LQ=&xsec_source=pc_search';
          break;
        case 'zcool':
        _url= 'https://www.zcool.com.cn/u/24556197';
          break;
        case 'gtn':
        _url = 'https://www.gtn9.com/user_center.aspx?categories=0&subclass=0&id=40B7C9BD5A23F45E';
          break;
        case 'be':
        _url = 'https://www.behance.net/light15';
          break;
      }
      window.open(_url, '_blank');
    }
  },
};
</script>
<style lang="scss" scoped>
.footer-box {
  width: 100%;
  min-width: 1600px;
  background-color: #FFF;
}

.footer-content {
  margin: 0 auto;
  max-width: 1920px;
  width: 100%;
  padding: 0 90px;
  display: flex;
  font-family: "BebasFont";
}

.imgstyle {
  width: 140px;
  height: 140px;
}

.img-list {
  display: flex;
  flex-direction: column;
  // padding-top: 135px;
}

.qrcode {
  text-align: center;
}

.qrfont {
  font-size: 18px;
  color: #000;
}

.floor-right {
  width: 100%;
  display: flex;
  padding-top: 90px;
  color: #000;
  text-align: left;
  justify-content: space-between;
}

.find-us {
  font-size: 27px;
  // max-width: 500px;
}

.top-font {
  font-size: 50px;
  color: #000000;
}

.font-base {
  font-size: 28px;
  line-height: 39px;
}

.font-basel {
  font-size: 32px;
}

.swhz-part {
  width: 420px;
  display: flex;
  justify-content: space-between;
}
.guanzhuus{
  // width: 271px;
}
.line-center {
  height: 100%;
  max-height: 340px;
  width: 1px;
  background-color: #000;
}

.about-web {
  font-size: 14px;
  font-family: BebasFontEn
}

.dot-style {
  text-indent: 1.5ch;
  position: relative;
  // padding-left: 25px;
}

.dot-style::before {
  content: '';
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #000;
  position: absolute;
  top: 12px;
  left: 0;
}
.icon-list {
  width: 148px;
  padding-top: 78px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 27px;
}
.bottom-txt{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-bottom: 40px;
}
.font-bottom-top{
  font-size: 18px;
  font-family: "BebasFont";
}
</style>